<template>
    <div class="app-container">
    <div style="margin:-5px 10px 15px 10px;">投诉管理</div>
    <el-table
            v-loading="loading"
            :data="ordeList"
            @selection-change="handleSelectionChange"
        >
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="订单号" align="center" prop="recordId" />
            <el-table-column label="所属分店" align="center" prop="shopName">
                <template #default="scope">
                    {{ fendian[scope.row.shopName] }}
                </template>
            </el-table-column>
            <el-table-column label="客户姓名" align="center" prop="vipName" />
            <el-table-column label="联系电话" align="center" prop="vipTel" />
            <el-table-column
                label="详细"
                align="center"
                prop="vipXiangxi"
                width="120px"
            >
                <template #default="scope">
                    {{
                        scope.row.vipSheng +
                        scope.row.vipShi +
                        scope.row.vipQu +
                        scope.row.vipXiangxi
                    }}
                </template>
            </el-table-column>
            <el-table-column label="客户类型" align="center" prop="vipType">
                <template #default="scope">
                    <dict-tag :options="vip_type" :value="scope.row.vipType" />
                </template>
            </el-table-column>
            <el-table-column label="客户属性" align="center" prop="vipProperty">
                <template #default="scope">
                    <dict-tag
                        :options="vip_property"
                        :value="scope.row.vipProperty"
                    />
                </template>
            </el-table-column>
            
            <el-table-column
                label="服务类型"
                align="center"
                prop="staffProperty"
            >
                <template #default="scope">
                    <dict-tag
                        :options="staff_property"
                        :value="scope.row.staffProperty"
                    />
                </template>
            </el-table-column>
            <el-table-column
                label="上门时间"
                align="center"
                prop="outTime"
                width="180"
            >
                <template #default="scope">
                    <!-- <span>{{ parseTime(scope.row.outTime, '{y}-{m}-{d}') }}</span> -->
                    
                        <span>{{
                            parseTime(scope.row.wishTime, '{y}-{m}-{d}')
                        }}</span
                        ><br />
                        <span>{{ shuzhu[scope.row.outTime - 1] }}</span>
                    
                </template>
            </el-table-column>
            <el-table-column
                label="服务阿姨"
                align="center"
                prop="staffName"
                width="100"
            >
            </el-table-column> 
            <el-table-column label="投诉时间"
                align="center"
                prop="tousuTime"
                width="100px">

            </el-table-column>
            <el-table-column
                label="投诉内容"
                align="center"
                prop="tousu"
                width="100px"
            >
            </el-table-column>
            <el-table-column
                label="操作"
                align="center"
                class-name="small-padding fixed-width"
                width="200px"
            >
                <template #default="scope">
                    <el-button
                        v-if="scope.row.shouhou == null"
                        type="primary"
                        @click="tousu(scope.row)"
                        >申请售后</el-button
                    >
                    <el-button
                        v-else
                        type="primary"
                        @click="tousu(scope.row)"
                        >查看售后</el-button
                    >
                    <el-button
                        type="primary"
                        @click="handleDelete(scope.row)"
                        v-hasPermi="['system:orde:remove']"
                        >删除</el-button
                    >
                </template>
            </el-table-column>
        </el-table>
    </div>
    <el-dialog
            v-if="title == '申请售后'||title=='查看售后'"
            :title="title"
            v-model="open"
            width="500px"
            center
        >
            <el-row
                ref="ordeRef"
                :form="form"
                style="margin: 10px 0 10px 50px; font-size: 14px"
            >
                <el-col style="margin-left: -15px; font-weight: bold;">订单信息</el-col>
                <el-col :span="12" style="margin: 10px 0">订单号： {{ form.recordId }}</el-col>
                <el-col :span="12" style="margin: 10px 0"
                    >客户姓名：{{ form.vipName }}</el-col
                >
                <el-col :span="12" style="margin: 10px 0"
                    >服务内容： {{ fuwu[form.staffProperty] }}</el-col
                >
                <el-col :span="12" style="margin: 10px 0"
                    >投诉时间： {{ form.tousuTime }}</el-col
                ><el-col  style="margin: 10px 0"
                    >上门时间： {{ form.wishTime
                    }}{{ shuzhu[form.time - 1] }}</el-col
                >
                <el-col  style="margin: 10px 0"
                    >上门地址： {{ form.vipSheng +
                        form.vipShi +
                        form.vipQu +
                        form.vipXiangxi }}</el-col
                >
                <el-col style="margin-left: -15px; margin-top: 30px; font-weight: bold;">订单信息</el-col>
                <el-col :span="4" style="margin-top: 20px;">售后原因</el-col>
                <el-input
    v-model="form.shouhou"
    style="width: 300px;margin: 18px 0;"
    :rows="3"
    type="textarea"
    placeholder="Please input"
  />
                
            </el-row>
            <el-button
                style="margin-left: 150px"
                type="primary"
                @click="queding(form)"
                >确定</el-button
            >
            <el-button
                v-if="form.shouhou"
                style="margin-left: 50px"
                type="primary"
                @click="quxiao"
                >取消</el-button
            >
        </el-dialog>

</template>
<script setup>
import {
        listOrde4,
        getOrde,
        delOrde,
        addOrde,
        updateOrde
    } from '@/api/system/orde'
    import { parseTime } from '../../../../utils/ruoyi'
    const { proxy } = getCurrentInstance()
    const {
        vip_property,
        time,
        yn_money,
        orde_source,
        staff_property,
        vip_type,
        shop
    } = proxy.useDict(
        'vip_property',
        'time',
        'yn_money',
        'orde_source',
        'staff_property',
        'vip_type',
        'shop'
    )

    const ordeList = ref([])
    const loading = ref(true)
    const open = ref(false)
    const title = ref()
    const fuwu=ref(['日常保洁','家电清洗','大扫除','家电维修'])
    const ids = ref([])
    const total = ref(0)
    const fendian = ref(['', '分店一', '分店二', '分店三', '分店四'])
    const shuzhu = ref([
        '全天',
        '上午8:00-10:00',
        '上午10:30-12:30',
        '下午2:00-4:00',
        '下午4:30-6:30'
    ])
    // const beforetime = ['00:00:00', '08:00:00', '10:30:00', '14:00:00', '16:30:00']
    // const aftertime = ['23:59:59', '10:00:00', '12:30:00', '16:00:00', '18:30:00']

    const data = reactive({
        form: {},
        queryParams: {
            pageNum: 1,
            pageSize: 10,
            shopName: null,
            vipType: null,
            staffProperty: null,
            wishTime: null,
            time: null,
            staffName: null,
            receiveTime: null,
            ynMoney: null,
            status: null
        },
        rules: {}
    })

    const { queryParams, form, rules } = toRefs(data)
    function getList5() {
        loading.value = true
        listOrde4(queryParams.value).then((response) => {
            ordeList.value = response.rows
            total.value = response.total
            loading.value = false
        })
    }
    /** 删除按钮操作 */
    function handleDelete(row) {
        const _recordIds = row.recordId || ids.value
        const row1 = JSON.parse(JSON.stringify(row))
        
        console.log(row);
        
        proxy.$modal
            .confirm('是否确认删除订单管理编号为"' + _recordIds + '"的差评？')
            .then(function () {
                row1.tousu = null
                row1.tousuTime = null
                row1.shouhou=null
                return  updateOrde(row1)
            })
            .then(() => {
                getList5()
                proxy.$modal.msgSuccess('删除成功')
            })
            .catch(() => {})
    }

    function tousu(row) {
        console.log(row)
        open.value = true
        if (row.shouhou) {
            title.value = '查看售后'
        } else {
            title.value = '申请售后'
        }

        const _recordId = row.recordId || ids.value

        getOrde(_recordId).then((response) => {
            form.value = response.data
            console.log(form);
            
        })
    }

    function queding(row) {
        console.log(row);
        updateOrde(row).then((response) => {
                proxy.$modal.msgSuccess('申请成功')
                open.value = false
                getList5()
            })
    }
    function quxiao() {
        open.value = false
    }
    getList5()
</script>
